{% extends "base.html" %}

{% block title %}添加学生 - 学生管理系统{% endblock %}

{% block scripts %}
<script>
// 添加新字段
function addDynamicField(fieldName = '', fieldValue = '') {
    const fieldId = 'field_' + Date.now();
    const isMobile = window.innerWidth < 768;
    
    let html;
    if (isMobile) {
        // 手机端垂直布局
        html = `
            <div class="mb-3 p-2 border rounded" id="${fieldId}">
                <div class="mb-2">
                    <label class="form-label small text-muted">字段名</label>
                    <input type="text" class="form-control" name="field_names[]" 
                           placeholder="请输入字段名" value="${fieldName}" required>
                </div>
                <div class="mb-2">
                    <label class="form-label small text-muted">字段值</label>
                    <input type="text" class="form-control" name="field_values[]" 
                           placeholder="请输入字段值" value="${fieldValue}">
                </div>
                <div class="text-end">
                    <button type="button" class="btn btn-sm btn-outline-danger" 
                            onclick="removeField('${fieldId}')">
                        <i class="fas fa-trash"></i> 删除
                    </button>
                </div>
            </div>
        `;
    } else {
        // 桌面端水平布局
        html = `
            <div class="row mb-2 align-items-center" id="${fieldId}">
                <div class="col-md-5">
                    <input type="text" class="form-control" name="field_names[]" 
                           placeholder="字段名" value="${fieldName}" required>
                </div>
                <div class="col-md-5">
                    <input type="text" class="form-control" name="field_values[]" 
                           placeholder="字段值" value="${fieldValue}">
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-sm btn-outline-danger" 
                            onclick="removeField('${fieldId}')">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        `;
    }
    
    document.getElementById('dynamicFieldsContainer').insertAdjacentHTML('beforeend', html);
}

// 删除字段
function removeField(fieldId) {
    document.getElementById(fieldId).remove();
}

// 页面加载时添加一个空字段
document.addEventListener('DOMContentLoaded', function() {
    addDynamicField();
});
</script>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="fas fa-user-plus me-2"></i>添加学生</h2>
            <a href="{{ url_for('index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>返回列表
            </a>
        </div>

        <div class="card">
            <div class="card-body">
                <form method="POST">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">姓名 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" required 
                                   placeholder="请输入学生姓名">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="age" class="form-label">年龄 <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="age" name="age" required 
                                   min="1" max="100" placeholder="请输入年龄">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="gender" class="form-label">性别</label>
                            <select class="form-select" id="gender" name="gender">
                                <option value="">请选择性别</option>
                                <option value="male">男</option>
                                <option value="female">女</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="grade" class="form-label">年级</label>
                            <select class="form-select" id="grade" name="grade">
                                <option value="">请选择年级</option>
                                <option value="大一">大一</option>
                                <option value="大二">大二</option>
                                <option value="大三">大三</option>
                                <option value="大四">大四</option>
                                <option value="研究生">研究生</option>
                                <option value="博士生">博士生</option>
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="major" class="form-label">专业</label>
                            <input type="text" class="form-control" id="major" name="major" 
                                   placeholder="请输入专业名称">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="email" class="form-label">邮箱</label>
                            <input type="email" class="form-control" id="email" name="email" 
                                   placeholder="请输入邮箱地址">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="phone" class="form-label">电话</label>
                            <input type="tel" class="form-control" id="phone" name="phone" 
                                   placeholder="请输入联系电话">
                        </div>
                    </div>

                    <!-- 动态字段管理区域 -->
                    <div class="card mb-3">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">自定义字段</h6>
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="addDynamicField()">
                                <i class="fas fa-plus me-1 d-none d-md-inline"></i>添加
                            </button>
                        </div>
                        <div class="card-body" id="dynamicFieldsContainer">
                            <!-- 动态字段将通过JavaScript添加 -->
                        </div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="reset" class="btn btn-outline-secondary me-md-2">
                            <i class="fas fa-redo me-1"></i>重置
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>保存
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="alert alert-info mt-3" role="alert">
            <i class="fas fa-info-circle me-2"></i>
            <strong>提示：</strong> 带 <span class="text-danger">*</span> 的字段为必填项。
        </div>
    </div>
</div>
{% endblock %}
